@import "[default].parameters.css";

:root {
    --size-8px: 0.5rem;
    --size-12px: 0.75rem;
    --size-14px: 0.875rem;
    --size-16px: 1rem;
    --size-18px: 1.125rem;
    --size-20px: 1.25rem;
    --size-24px: 1.5rem;
    --size-28px: 1.75rem;
    --size-32px: 2rem;
    --size-36px: 2.25rem;
    --size-40px: 2.5rem;
    --size-48px: 3rem;
    --size-56px: 3.5rem;
    --size-64px: 4rem;
    --size-80px: 5rem;
    --size-96px: 6rem;
    /* Font weight */
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    /* Font family */
    --font-family-base: InterVariable;
    --font-family-headings: InterVariable;
    --font-family-icons: "Font Awesome 6 Pro";
    /* Texts */
    --text-body-mini: var(--size-12px);
    --text-body-small: var(--size-14px);
    --text-body-base: var(--size-16px);
    --text-body-large: var(--size-18px);
    --text-body-huge: var(--size-20px);
    /* Headings */
    --text-heading-1: var(--size-48px);
    --text-heading-2: var(--size-40px);
    --text-heading-3: var(--size-32px);
    --text-heading-4: var(--size-28px);
    --text-heading-5: var(--size-24px);
    --text-heading-6: var(--size-20px);
    --margin-heading-1: calc(var(--text-heading-1) * 0.5);
    --margin-heading-3: calc(var(--text-heading-3) * 0.5);
    --margin-heading-2: calc(var(--text-heading-2) * 0.5);
    --margin-heading-4: calc(var(--text-heading-4) * 0.5);
    --margin-heading-5: calc(var(--text-heading-5) * 0.5);
    --margin-heading-6: calc(var(--text-heading-6) * 0.5);
    /* Line height */
    --font-line-height-mini: var(--size-20px);
    --font-line-height-small: var(--size-20px);
    --font-line-height-base: var(--size-24px);
    --font-line-height-large: var(--size-28px);
    --font-line-height-huge: var(--size-32px);
    --font-line-height-heading-1: var(--size-56px);
    --font-line-height-heading-2: var(--size-48px);
    --font-line-height-heading-3: var(--size-40px);
    --font-line-height-heading-4: var(--size-36px);
    --font-line-height-heading-5: var(--size-30px);
    --font-line-height-heading-6: var(--size-28px);
}

@media screen and (min-width: 992px) {
    :root {
        /* Texts */
        --text-body-mini: var(--size-14px);
        --text-body-small: var(--size-16px);
        --text-body-base: var(--size-18px);
        --text-body-large: var(--size-20px);
        --text-body-huge: var(--size-24px);
        /* Headings */
        --text-heading-1: var(--size-56px);
        --text-heading-2: var(--size-48px);
        --text-heading-3: var(--size-40px);
        --text-heading-4: var(--size-32px);
        --text-heading-5: var(--size-28px);
        --text-heading-6: var(--size-24px);
        --margin-heading-1: calc(var(--text-heading-1) * 0.5);
        --margin-heading-3: calc(var(--text-heading-3) * 0.5);
        --margin-heading-2: calc(var(--text-heading-2) * 0.5);
        --margin-heading-4: calc(var(--text-heading-4) * 0.5);
        --margin-heading-5: calc(var(--text-heading-5) * 0.5);
        --margin-heading-6: calc(var(--text-heading-6) * 0.5);
        /* Line height */
        --font-line-height-mini: var(--size-20px);
        --font-line-height-small: var(--size-20px);
        --font-line-height-base: var(--size-24px);
        --font-line-height-large: var(--size-28px);
        --font-line-height-huge: var(--size-32px);
        --font-line-height-heading-1: var(--size-64px);
        --font-line-height-heading-2: var(--size-56px);
        --font-line-height-heading-3: var(--size-48px);
        --font-line-height-heading-4: var(--size-40px);
        --font-line-height-heading-5: var(--size-36px);
        --font-line-height-heading-6: var(--size-32px);
    }
}

.display-1 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: var(--text-heading-1);
}
.display-2 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: var(--text-heading-2);
}
.display-3 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: var(--text-heading-3);
}